<template>
    <div class="uiLayout">
        <el-popover
            :width="380"
            :show-arrow="false"
            trigger="hover"
            @before-enter="getAvaInfos(Number(props.card.mid))"
        >
            <template #reference>
                <template v-if="props.card.pendant.image" >
                    <div class="avatarBox">
                        <img :src="props.card.face" />    
                        <img :src="props.card.pendant.image_enhance" class="headAvaBefore"/>
                    </div>
                </template>
                <template v-else>
                    <div class="defauleAvaBox">
                        <img :src="props.card.face"/>
                    </div>
                </template>
            </template>
            <template #default v-if="upCardInfo">
                <up-info-box 
                    :card="upCardInfo.card"
                    :space="upCardInfo.space"
                    :like_num="upCardInfo.like_num"
                    :following="upCardInfo.following"
                >
                </up-info-box>
            </template>
        </el-popover>
           
        <div class="infoBox">
            <p>
                <el-popover
                    :width="380"
                    :show-arrow="false"
                    trigger="hover"
                    @before-enter="getAvaInfos(Number(props.card.mid))"
                >
                    <template #reference>
                        <a :style="{ 'color':props.card.vip.nickname_color?props.card.vip.nickname_color:'' }" href="#">{{ props.card.name }}</a>
                    </template>
                    <template #default v-if="upCardInfo">
                        <up-info-box 
                            :card="upCardInfo.card"
                            :space="upCardInfo.space"
                            :like_num="upCardInfo.like_num"
                            :following="upCardInfo.following"
                        >
                        </up-info-box>
                    </template>
                </el-popover>
                
                <span>
                    <img src="@/assets/videoIcon/message.png"/>
                    发消息
                </span>
            </p>
            <p>
                <span>{{ props.card.sign }}</span>
            </p>
            <p>
                <el-button style="width:35%;color:#FB7299;border:1px solid #FB7299;"><img src="@/assets/videoIcon/sdPink.png" style="width:18px;"/>充电</el-button>
                <el-button v-if="!props.following" type="primary" style="width:60%">+ 关注 {{ formatNum(props.card.fans) }}</el-button>
                <el-button v-else disabled type="primary" style="width:60%">已关注 {{ formatNum(props.card.fans) }}</el-button>
            </p>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { upCardInfo } from '../typeInterface'
import { formatNum } from '@/utils/format'
import upInfoBox from './upInfoBox.vue'
import { ref,Ref } from 'vue'
import { getAvaInfo } from '@/http/httpFunction'
interface Props extends upCardInfo{

}
const props = defineProps<Props>()

let upCardInfo:Ref<upCardInfo | undefined> = ref()
function getAvaInfos(mid:number){
    return getAvaInfo(mid).then(res => { upCardInfo.value = res })
}

</script>

<style lang="scss" scoped>
p{
    padding: 0;
    margin: 0;
}
.uiLayout{
    width: 100%;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.infoBox{
    margin-left: 10px;
    display: flex;
    min-width: 80%;
    width: 85%;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    text-align: left;
    & p:nth-child(1){
        @include flexRowCenter;
        gap:15px;
        font-size: 15px;
        color: #18191C;
    }
    & p:nth-child(1) a{
        font-size: 15px;
        color: #18191C;
    }
    & p:nth-child(1) span:nth-child(2){
        @include flexRowCenter;
        font-size: 13px;
        color: #61666D;
    }
    & p:nth-child(1) span:nth-child(2) img{
        width: 16px;
        height: 16px;
        margin-right: 5px;
    }
    & p:nth-child(2){
        width: 100%;
        font-size: 13px;
        color: #9499A0;
        @include noWrap;
    }
    & p:nth-child(3){
        margin-top: 5px;
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
}
.defauleAvaBox{
    @include flexRowCenter;
    width: 15%;
    height: 100%;
    & img:nth-child(1){
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
}
.avatarBox{
    display: flex;
    width: 20%;
    height: 100%;
    min-width: 70px;
    position: relative;
    & img:nth-child(1){
        position: absolute;
        left: 15px;
        top: 15px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
}
.headAvaBefore{
    position: absolute;
    top: 10;
    left: 0;
    width: 70px;
    height: 70px;
}
</style>